@font-face {
  font-family: 'iconfont';
  src: url('http://at.alicdn.com/t/font_1462872817_5717824.eot'); /* IE9*/
  src: url('http://at.alicdn.com/t/font_1462872817_5717824.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('http://at.alicdn.com/t/font_1462872817_5717824.woff') format('woff'), /* chrome、firefox */
  url('http://at.alicdn.com/t/font_1462872817_5717824.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('http://at.alicdn.com/t/font_1462872817_5717824.svg#iconfont') format('svg'); /* iOS 4.1- */
}  

.iconfont{
  font-family:"iconfont";
  font-size:16px;
  font-style:normal;
}

* {
  margin: 0;
  padding: 0;
}


ul {
  list-style: none;
}

a {
  color: #000000;
  text-decoration: none;
}

audio {
	display: none
}

.left-container {
	width: 230px;
	min-height: 600px;
	float: left;
}

.top-logo-container {
	float: left;
	margin-top: 5px;
	margin-left: 10px;
	width: 222px;
}

.top-logo-container img {
	max-width: 200px;
	height: 40px;
}

.contacts-container {
	margin-left: 10px;
	width: 211px;
	float: left;
	min-height: 100px;
}
	
#custom-list-tab {
	padding: 0;
}

.custom-list {
	width: 100%;
	padding: 0;
	overflow-y: scroll;
	max-height: 500px
}

::-webkit-scrollbar {
    width: 3px;
}

.custom-item {
	position: relative;
	width: 200px;
	height: 50px;
	margin: 3px 5px;
	padding-top: 3px;
	border-bottom: 1px solid lightgrey;
}

.custom-item.online .custom-avatar {
  color: green;
}

.custom-item.online .custom-status {
	background-color: green;
}

.custom-item.waiting .custom-avatar {
  color: #32cd32;
}

.custom-item.waiting .custom-status {
	background-color: #32cd32;
}

.custom-item.chating .custom-avatar {
  color: yellow;
}

.custom-item.chating .custom-status {
	background-color: yellow;
}


.custom-item.after .custom-avatar {
  color: blue;
}


.custom-item.after .custom-status {
	background-color: blue;
}

.custom-name {
	margin-right: 2px;
}

.custom-avatar {

}

.custom-status {
	position: absolute;
	top: 11px;
	width: 6px;
	height: 6px;
	background-color: grey;
}

.online-livetime {
	margin-left: 10px;
	font-size: 15px;
}

.delete-custom-buttom {
	position: absolute;
	right: 3px;
	top: 0px;
	font-size: 5px;
}

.delete-custom-buttom:hover {
	background-color: silver;
	border: 1px solid grey;
	border-radius: 3px;
	color: white;
}

.custom-location-info {
	color: grey;
	font-size: 12px;
}

.location-ipaddress {
	font-size: 8px;
}

.custom-location-text {
	font-size: 12px;
}

.custom-viewing-url {
	font-size: 12px;
	max-width: 200px;
	color: lightgrey;
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.custom-device-info, .custom-browser-info {
	position: relative;
	margin-top: 4px;
	right: 9px;
	bottom: 40px;
	font-size: 20px;
	float: right;
}

.service-item {
	margin-bottom: 20px;
}

.chat-panel-container {
	border: 1px solid lightgrey;
	border-radius: 3px;
	width: calc(100% - 240px);
	height: 372px;
	margin-top: 8px;
	float: right;	
	background-color: #fbfbfb;
}

.chat-panel-list {
    overflow: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

.chat-panel {
	border: 1px solid lightblue;
	border-radius: 	2px;
	margin-left: 5px;
	margin-top: 5px;
	width: 	300px;
	height: 345px;
    display: inline-block;
	background-color: white;
	-webkit-filter: grayscale(90%);
}

.chat-panel.active {
  -webkit-filter: grayscale(0%);
  -ms-transform: scale(1.01,1.01); /* IE 9 */
  -webkit-transform: scale(1.1,01.01); /* Safari */
  transform: scale(1.01,1.01); /* Standard syntax */
}

.chat-panel-titlebar {
	height: 25px;
	background-color: #4285f4;
	color: white;
}

.chat-panel-title-text {
	margin-left: 10px;
	position: relative;
	top: 2px;
}

.chat-message-board {
  height: 315px;
  overflow-y: scroll;
}

.message-in {
	background-color: lightblue;
    word-wrap: break-word;
    white-space: normal;
	max-width: 200px;
	float: left;
	clear: both;
	padding: 2px 10px;
	margin-bottom: 2px;
}

.message-in * {
	color: #2c1b00;
}

.timestamp {
	font-size: 10px;
	color: #999999;
}

.message-sender {
	color: grey;
	font-size: 12px;
}

.message-out {
	background-color: lightgreen;
    word-wrap: break-word;
    white-space: normal;
	max-width: 200px;
	float: right;
	clear: both;
	padding: 2px 10px;
	margin-bottom: 2px;
}

.system-message {
	clear: both;
	text-align: center;
	font-size: 12px;
	margin-bottom: 2px;
}

.system-message-text {
	padding: 2px;
	background-color: darkgrey;
	color: white;
}

.emoji-message {
	width: 22px;
	position: relative;
	top: 3px;
}

.transmit-button {
	padding: 1px 2px;
	border-radius: 2px;
	background-color: white;
	color: black;
	font-size: 10px;
	cursor: pointer;
}

.transmit-button .iconfont {
	font-size: 8px;
}

.message-audio-play-button {
	cursor: pointer;
}

.message-audio-play-button * {
	color: white;
}

.on-voice-prompt {
	float: right;
	margin-right: 20px;
	display: none;
}

.input-container {
	float: left;
	margin-left: 10px;
	margin-top: 5px; 
	border: 1px solid lightgrey;
	border-radius: 3px;
	position: relative;
	width: calc(100% - 300px);
}

.input-container > div {
	display: inline;
	float: left;
}


.currents-serice-online-status {
	width: 100px;
	font-size: 12px;
}

.file-download-button {
	display: block;
}

.file-download-button .iconfont {
	font-size: 30px;
}
.ui-selectmenu-button {
	height: 20px;
}

.currents-serice-online-status .ui-selectmenu-text {
	font-size: 12px;
	padding-top: 2px;
}
.operate-bar > div {
	display: inline;
	float: left;
}

.input-operate-board {
	margin-left: 20px;
	margin-top: 5px;
}

.input-operate-board  > div {
	display: inline;
}

.function-button {
	margin: 0 2px;
}

.function-button .iconfont {
	font-size: 25px;
}

.text-input {
  border-radius: 5px;
  border: 1px solid darkslategrey;
  width: 333px;
  height: 25px;
  font-size: 17px;
  padding: 2px;
  margin-left: 20px;
}

#emoji-box {
	width: 314px;
	float: left;
	border: 1px solid grey;
	border-radius: 5px;
	background-color: lightgrey;
	position: fixed;
	padding: 3px;
}

.emoji-grid-cell {
	display: inline-block;
}

.emoji-grid-cell:hover {
	border: 1px solid black;
}

.send-button {
  border: none;
  border-radius: 3px;
  width: 50px;
  height: 30px;
  background-color: #3685d1;
  color: #ffffff;
}

.close-chat-panel-button {
	float: right;
	cursor: pointer;
	margin-right: 2px;
}

.clipboard-container {
	border: 1px solid lightgrey;
	width: calc(100% - 300px);
	border-radius: 3px;
	float: left;
	display: block;
	margin-top: 10px;
	margin-left: 10px;
}

.clip-container, .add-clip-container {
	 background-color: #eeeeee;
	 display: inline-block;
	 padding: 5px;
	 border-radius: 5px;
	 margin: 5px;
}

.clip-delete-button {
	cursor: pointer;
}

.clip-container:hover, .clip-delete-button:hover {
	background-color: darkgrey;
}

.add-clip-container:hover {
	background-color: #cccccc;
}

.image-message {
	max-width: 200px;
}

#transmit-service-list-container {
	position: fixed;
	border: 1px solid grey;
	border-radius: 5px;
	background-color: white;
	cursor: pointer;
}

.transmit-service-item {
	border-bottom: 1px solid lightgrey;
	padding: 3px 10px;
}

.transmit-service-item:hover {
	background-color: grey;
}


.file-message-download-tip {
  font-size: 18px;  
}



.img-viewer-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background: transparent;
  z-index: 10;
}

.img-viewer-contaner {
  position: absolute;
  width: 600px;
  height: 500px;
  top:0 ;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #333333;
}

.img-show {
  margin: auto;
  max-width: 500px;
  max-height: 500px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.img-viewer-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: white;
}


.login-layer-container {
	position: fixed;
	z-index: 100;
	margin: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/login-bg.jpg');
	background-size: 100% 100%;
}

.login-layer-title-text {
	color: #efefef;
}

.login-content-container {
	position: absolute;
	width: 400px;
	right: 10%;
	top: 10%;
}

#login-box {
	border: 1px solid grey;
	border-radius: 10px;
	width: 300px;
	height: 300px;
	float: right;
	margin-right: 10%;
	margin-top: 40px;
    background-color: #ffffff;
}

.login-layer-title-container {
	float: right;
	clear: both;
	margin-right: 10%;
}

.login-box-border-wrapper {
	margin: 3px;
	border: 1px solid grey;
	border-radius: 5px;
	height: 290px;
	background-color: #eeeeee;
}

.login-input-title-container {
  margin-top: 23px;
}

.login-input-title-text {
	font-size: 30px;
	margin-left: 90px;
}

.username-input-container {
  margin-top: 30px;
}

.username-input-container, .userpasswd-input-container, .login-button-container {
	margin-left: 50px;
	height: 50px;
}

.remember-me-input-container {
	margin-left: 50px;
	margin-bottom: 10px;
}

.remember-me-input-text {
	font-size: 15px;
	color: #666666;
	margin-left: 5px;
}

.username-input, .userpasswd-input {
	height: 30px;
	border-radius: 4px;
	width: 200px;
	border: 1px solid grey;
	padding-left: 10px;
}


.login-button-container {
}

.login-button {
	width: 200px;
	height: 30px;
	background-color: #33b6ea;
	border: none;
	color: white;
	border-radius: 5px;
	cursor: pointer;
}

.service-item.online .custom-avatar{
  color: #81EB0F;
}

.service-item.away .custom-avatar{
  color: blue;
}


.service-item.busy .custom-avatar{
  color: red;
}

